<template>
  <div class="flow-base-info-header">
    <div class="info-header__title">
      <span class="info-header__left-title">{{ empty(props.title) }}</span>
      <el-tag v-if="tagTitle" class="info-header__right-tag" :class="tagStyle">{{
        empty(props.tagTitle)
      }}</el-tag>
    </div>
    <div class="info-header__desc g-mt4">
      <slot name="desc"></slot>
    </div>
  </div>
</template>

<script lang="ts" setup name="ContentHeader">
import { withDefaults, defineProps, computed } from 'vue';
import { FormTypeEnum } from '@/constants/supplier';
import { empty } from '@/utils';

interface ContentHeaderProps {
  title?: string;
  tagTitle?: string;
  tagStyle?: string;
}
const props = withDefaults(defineProps<ContentHeaderProps>(), {
  title: '',
  tagTitle: '',
  tagStyle: FormTypeEnum.REQUEST
});

const tagStyle = computed(() => {
  return `tag-style-${props.tagStyle}`;
});
</script>

<style lang="scss" scoped>
.flow-base-info-header {
  padding-bottom: 32px;
  .info-header__title {
    font-size: 20px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #0a1f33;
    line-height: 28px;
    display: flex;
    align-items: center;
    .info-header__left-title {
      margin-right: 10px;
    }
  }
  .info-header__desc {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #435970;
    line-height: 22px;
  }
}
.tag-style-REQUEST {
  color: #fda70a;
  background: #fef7e6;
}
.tag-style-SEND {
  color: $g-color-g2;
  background-color: $g-color-g4;
}
</style>
